<template>
  <div class="map-wrap">
    <!--覆盖物-->
    <template v-if="markers && markers.length > 0 && markers[0].x && showMap">
      <div v-for="item in markers" :key="item.id" :class="['dot', 'dot-' + item.type]" :style="{ left: item.x + 'px', top: item.y + 'px' }"></div>
    </template>
    <div id="maphome" class="map-content">1233</div>
  </div>
</template>

<script>
// import MapLoader from '@/assets/js/AMap.js'

export default {
  name: 'MapHome',
  props: {
    mapData: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      showMap: false,
      markers: null
    }
  },
  mounted () {
    const that = this
    that.drawMap()
  },
  components: {},
  methods: {
    async drawMap () {
      let that = this
      const mapData = that.mapData
      // 绘制地图
      const AMap = window.AMap
      // console.log('AMap', AMap)
      const centerLatLng = [mapData.center.lat, mapData.center.lng]
      // console.log('地图加载成功')
      that.maphome = new AMap.Map('maphome', {
        center: centerLatLng,
        mapStyle: 'amap://styles/a1bc739aff08a77850def0691274d555', // 设置地图的显示样式
        pitch: 50, // 地图俯仰角度，有效范围 0 度- 83 度
        viewMode: '3D', // 地图模式
        zoom: 18,
        zoomEnable: false,
        dragEnable: false
      })

      const path = mapData.mappath
      const polyline = new AMap.Polygon({
        // const polyline = new AMap.Polygon({
        path: path,
        isOutline: true,
        // outlineColor: '#ffeeff',
        // borderWeight: 3,
        fillColor: '#2ddfc1', // 填充颜色
        fillOpacity: 0.15, // 填充透明度
        strokeColor: '#2ddfc1',
        strokeOpacity: 0.8,
        strokeWeight: 6,
        // 折线样式还支持 'dashed'
        strokeStyle: 'solid',
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50
      })

      if (mapData.otherlist) {
        mapData.otherlist.map((arr, index) => {
          var content = '' +
            '<div class="custom-content-marker">' +
            ' <div class="ico"></div>' +
            '<div style="font-size:9px;color:#def9f4;">' +
            arr.name +
            '</div>' +
            '</div>'
          var markerz = new AMap.Marker({
            content,
            position: [arr.lat, arr.lng]
          })

          that.maphome.add(markerz)
        })
      }

      that.maphome.on('complete', function () {
        that.showMap = true
        // console.log('home commpule')
      })
      that.maphome.add(polyline)
      // 坐标转换
      that.markers = mapData.markers.map(arr => {
        const lnglat = new AMap.LngLat(arr.lat, arr.lng)
        const pixel = that.maphome.lnglatTocontainer(lnglat)
        const dot = pixel.round()
        // console.log('dot:', dot)
        return Object.assign(arr, { x: dot.x, y: dot.y })
      })
      // console.log('show', that.showMap)
      // console.log('markers:', that.markers)
    }
  }
}
</script>

<style lang="scss" scoped>
  .map-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 1;
    bottom: 0;
  }
  .map-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 999;
    /*transition: opacity 0.5s;*/
  }
  $sz: 10px;
  .dot {
    position: absolute;
    width: $sz;
    height: $sz;
    z-index: 1000;
    -webkit-border-radius: $sz/2;
    -moz-border-radius: $sz/2;
    border-radius: $sz/2;
    margin-left: -$sz/2;
    margin-top: -$sz/2;
    /*transform: skew(-10deg, 0deg);*/
    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      animation: ani 1.5s linear infinite;
    }
    &-1 {
      $bgc: yellow;
      background-color: $bgc;
      &:after {
        background-color: $bgc;
      }
    }
    &-2 {
      $bgc: #e45e29;
      background-color: $bgc;
      &:after {
        background-color: $bgc;
      }
    }
    &-3 {
      $bgc: red;
      background-color: $bgc;
      &:after {
        background-color: $bgc;
      }
    }
    &-4 {
      $bgc: #29e480;
      background-color: $bgc;
      &:after {
        background-color: $bgc;
      }
    }
  }
  @keyframes ani {
    0% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1.4);
      width: $sz;
      height: $sz;
    }
    30% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1.3);
      width: $sz*2;
      height: $sz*2;
      opacity: .5;

    }
    70% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1.2);
      width: $sz*4;
      height: $sz*4;
      opacity: .3;

    }
    100% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1);
      width: $sz*5;
      height: $sz*5;
      opacity: 0;
    }
  }
</style>
